<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>全部订单</title>
	<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
	<style type="text/css">
		body {
			background-color: #F0F1F2;

		}

		.order-info {}

		.item-wraper {
			padding: 0 0.15rem;
			background: #ffffff;
			margin-bottom: 0.1rem;

		}

		.item-wraper .header-wraper {
			display: flex;
			justify-content: space-between;
			align-content: center;
			padding: 0.12rem 0 0.1rem 0rem;
			border-bottom: 1px solid #e6e6e6;
		}

		.item-wraper .header-wraper .left-order-num {
			font-size: 0.13rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 0.18rem;
		}

		.item-wraper .header-wraper .status {
			font-size: 0.13rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(247, 48, 36, 1);
			line-height: 0.18rem;
		}

		.item-info {
			background: #ffffff;
			padding: 0.15rem 0;
			padding-bottom: 0;
			border-bottom: 1px solid #e6e6e6;

		}

		.item-info .item {
			display: flex;
			margin-bottom: 0.15rem;
		}

		.item-info .item img {
			width: 0.76rem;
			height: 0.76rem;
			flex-shrink: 0;
			margin-right: 0.1rem;
		}

		.item-info .item .right-cont .right-top-title {
			font-size: 0.15rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 0.05rem;
		}

		.item-info .item .right-cont .right-mid-attribute {
			font-size: 0.15rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(128, 128, 128, 1);
			line-height: 0.21rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 0.05rem;
		}

		.item-info .item .right-cont .right-bottom {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		.item-info .item .right-cont .right-bottom .price {
			font-size: 0.15rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
			float: left;
		}

		.item-info .item .right-cont .right-bottom .num {
			font-size: 0.14rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 0.2rem;
			float: right;
		}

		.item-control {
			padding: 0.1rem 0;
		}

		.item-control .pays {
			display: flex;
			justify-content: flex-end;
			font-size: 0.12rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 0.17rem;
			margin-bottom: 0.05rem;
		}

		.item-control .pays span {
			font-size: 0.15rem;
		}

		.item-control .pay-btn-wraper {
			display: flex;
			justify-content: flex-end;
		}

		.item-control .pay-btn-wraper .cancel-btn {
			border-radius: 0.16rem;
			border: 1px solid rgba(153, 153, 153, 1);
			padding: 0.06rem 0.16rem;
			font-size: 0.13rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
			line-height: 0.18rem;
			margin-right: 0.15rem;
		}

		.item-control .pay-btn-wraper .cancel-btn.gt {
			margin-right: 0
		}

		.item-control .pay-btn-wraper .pay-btn {
			background: rgba(255, 255, 255, 1);
			border-radius: 0.16rem;
			padding: 0.06rem 0.23rem;
			font-size: 0.13rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 90, 147, 1);
			line-height: 0.18rem;
			border: 1px solid rgba(0, 90, 147, 1);
		}

		.item-control .pay-btn-wraper .pay-btn.pay_sure {
			background: #005A93;
			color: #fff
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="order-info">
			<div class="item-wraper" v-for="(vo,index) in info" :key="index">
				<!-- 订单编号及状态栏 -->
				<div class="header-wraper">
					<div class="left-order-num" v-text="'订单编号：' + vo.order_num"></div>
					<div class="status">
						<span v-if="vo.status=='-1'">交易关闭</span>
						<span v-if="vo.status=='0'">待支付</span>
						<span v-if="vo.status=='10'">待发货</span>
						<span v-if="vo.status=='20'">已发货</span>
						<span v-if="vo.status=='30'">已完成</span>
						<span v-if="vo.status=='40'">已退款</span>
					</div>
				</div>

				<!-- 订单信息 -->
				<div class="item-info" v-for="(item,index1) in vo.good" :key="index1" tapmode
					@click="openWin_order_detail(vo.id)">
					<div class="item">
						<img :src="item.cover" alt />
						<div class="right-cont">
							<div class="right-top-title" v-text="item.good_title"></div>
							<div class="right-mid-attribute" v-text="item.good_sku"></div>
							<div class="right-bottom">
								<div class="price">
									¥{{price_format('yuan',item.good_price)}}.{{price_format('fen',item.good_price)}}
								</div>
								<div class="num" v-text="'×' + item.good_num"></div>
							</div>
						</div>
					</div>
				</div>
				<!-- 付款按钮等 -->
				<div class="item-control">
					<div class="pays" v-if="vo.status =='0'">
						需付款：¥
						<span>{{price_format('yuan',vo.pay_price)}}.{{price_format('fen',vo.pay_price)}}</span>
					</div>
					<div class="pays" v-if="vo.status!='0'">
						实付款：¥
						<span>{{price_format('yuan',vo.pay_price)}}.{{price_format('fen',vo.pay_price)}}</span>
					</div>
					<div class="pay-btn-wraper" v-if="vo.status=='0'">
						<div class="cancel-btn" tapmode @click="cancelOrder(vo.id)">取消订单</div>
						<div class="pay-btn" tapmode @click="open_pay(vo)">去付款</div>
					</div>
					<div class="pay-btn-wraper" v-if="vo.status=='20'">
						<div class="cancel-btn" tapmode @click="next(vo.id)">查看物流</div>
						<div class="pay-btn pay_sure" tapmode @click="confirmOrder(vo.id)">确认收货</div>
					</div>
					<div class="pay-btn-wraper" v-if="vo.status=='30'">
						<div class="cancel-btn" tapmode @click="delOrder(vo.id)">删除订单</div>
						<div class="pay-btn" v-if="vo.comment_status==0" tapmode @click="comment_order(vo)">去评价</div>
					</div>
					<div class="pay-btn-wraper" v-if="vo.status=='-1'">
						<div class="cancel-btn gt" tapmode @click="delOrder(vo.id)">删除订单</div>
					</div>
					<div class="pay-btn-wraper" v-if="vo.status=='40'">
						<div class="cancel-btn gt" tapmode @click="delOrder(vo.id)">删除订单</div>
					</div>
				</div>
			</div>
			<!-- 缺省页面 -->
			<div class="aui-text-center" v-if="info.length < 1" style="margin-top: 1.04rem;" tapmode>
				<img src="../../../image/bg/bg-nonecar.png"
					style="width:1.51rem;margin-left:50%;transform:translateX(-50%);" />
				<div
					style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
					暂无数据
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-dialog.js"></script>
<script>
	//		订单状态-2删除订单 -1 订单取消 0 待付款 10 已付款|待发货 20已发货 30 已完成 40 已退款
	var vm = new Vue({
		el: '#app',
		data: {
			info: [],
			index: 'all',
			page: 1,
			loadmore: true
		},
		methods: {
			next(id) {
				openWin_logistics_detail(id)
				return;
			},
			get_list: function () {
				get_data('api/ScoreOrder/orderList', {
					token: $api.getStorage('token'),
					status: vm.index,
					page: vm.page
				}, function (ret) {
					//alert(JSON.stringify(ret.data))
					if (ret.status) {
						if (ret.data.length < 20) {
							vm.loadmore = false
						}
						ret.data.forEach(function (item) {
							vm.info.push(item)
						})
						console.log('=====================')
						console.log(JSON.stringify(vm.info))
					}
				})
			},
			// 删除订单
			delOrder: function (id) {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '确定要删除这个订单吗？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 17,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function (ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						get_data('api/Order/delOrder', {
							token: $api.getStorage('token'),
							order_id: id
						}, function (ret) {
							if (ret.status) {
								send_event('logined')
								api.refreshHeaderLoading();
							}
						})
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
			},
			// 取消订单
			cancelOrder: function (id) {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '确定要取消这个订单吗？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 17,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function (ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						get_data('api/Order/cancelOrder', {
							token: $api.getStorage('token'),
							order_id: id
						}, function (ret) {
							if (ret.status) {
								send_event('logined')
								api.refreshHeaderLoading();
							}
						})
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
			},
			// 确认收货
			confirmOrder: function (id) {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '是否确认收货？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 20,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function (ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						get_data('api/Order/confirmOrder', {
							token: $api.getStorage('token'),
							order_id: id
						}, function (ret) {
							if (ret.status) {
								toast('确认收货成功')
								send_event('logined')
								api.refreshHeaderLoading();
							}
						})
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});

			},
			// 立即付款
			price_format: function (type, price) {
				var price = (price / 100).toFixed(2);
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			}
		}
	})
	var dialog = new auiDialog();
	apiready = function () {
		add_event('logined', function (ret) {
			vm.get_list()
		})

		if ($api.getStorage('status')) {
			vm.index = $api.getStorage('status');
			$api.rmStorage('status')
		}
		vm.get_list()
		fnInitScrollToBottom(function (ret) {
			console.log(111)
			if (vm.loadmore) {
				vm.page++;
				vm.get_list()
			}
		})
		// fnInitScrollToBottom(function (ret) {
		// 	vm.info = [];
		// 	vm.page = 1;
		// 	vm.loadmore = true
		// 	if (vm.loadmore) {
		// 		vm.page++;
		// 		vm.get_list()
		// 	}
		// })
		// 新版刷新
		refresh_new(function () {
			setTimeout(function () {
				vm.info = [];
				vm.page = 1;
				vm.loadmore = true
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		fnInitPullRefresh(function () {
			vm.info = [];
			vm.page = 1;
			vm.loadmore = true
			vm.get_list()
			api.refreshHeaderLoadDone();

		})
		//首页顶部最新按钮跟点赞数按钮点击时触发
		add_event('order_index', function (ret) {
			vm.index = ret.index
			vm.info = [];
			vm.page = 1;
			vm.loadmore = true
			vm.get_list()
		})
		add_event('order_chang', function (ret) {
			vm.info = [];
			vm.page = 1;
			vm.loadmore = true
			vm.get_list()
		})

	};



	function tapindex(index) {
		if (vm.index != index) {
			vm.index = index
			vm.info = [];
			vm.page = 1;
			vm.loadmore = true
			vm.get_list()
		}
	}

	function comment_order(data) {
		var comment = [];
		data.good.forEach(function (el) {
			var obj = {
				good_id: el.good_id,
				good_name: el.title + ' ' + el.good_sku,
				star_num: 5,
				content: "",
				good_img: el.cover,
				good_sku: el.good_sku,
				img: [],
				imgpath: []
			}
			comment.push(obj)
		})
		$api.setStorage('comment', comment)
		$api.setStorage('id', data.id);
		open_win('my_ordre_shaidan', '../my_ordre_shaidan.html', false)
	}

	function open_pay(el) {
		// alert(JSON.stringify(el))
		// return
		$api.setStorage('orderinfo', {
			pay_price: el.pay_price,
			order_num: el.order_num,
			order_id: el.id,
		})
		open_win('payment', '../../cart/payment.html', false)
	}

	function open_sel_return_cause(id) {
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: [{
				"name": '我不想买了',
				"id": '0'
			}, {
				"name": '信息填写错误，重新拍',
				"id": '1'
			}, {
				"name": '卖家缺货',
				"id": '2'
			}, {
				"name": '其他原因',
				"id": '3'
			}],
			layout: {
				row: 3,
				col: 1,
				height: 50,
				size: 13,
				sizeActive: 15,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#999',
				colorActive: '#999',
				colorSelected: '#999',
				leftMargin: 35, //（可选项）数字类型；选择器分割线的左边距；默认：0
				rightMargin: 35,
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: 'rgba(0,0,0,0)',
				color: '#999',
				colorActive: '#999'
			},
			ok: {
				text: '确定',
				size: 18,
				w: 90,
				h: 43,
				bg: 'rgba(0,0,0,0)',
				bgActive: '#72D5EF',
				color: '#005A93',
				colorActive: '#005A93'
			},
			title: {
				text: '',
				size: 12,
				h: 44,
				bg: '#fff',
				color: '#fff'
			},
			lineColor: '#E6E6E6',
			actives: [1],
			fixedOn: api.frameName
		}, function (ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					var return_cause = ret.selectedInfo[0].name;
					get_data('api/Order/cancelOrder', {
						token: $api.getStorage('token'),
						order_id: id,
						cancel_reason: return_cause
					}, function (ret) {
						if (ret.status) {
							toast('取消订单成功')
							send_event('logined')
							api.refreshHeaderLoading();
						}
					})
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
</script>

</html>
